<template>
    <div>
        <el-pagination
                small
                background
                :layout="layout"
                :total="total"
                :default-page-size="pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
        />
    </div>
</template>

<script setup>


const UpdatePagination = defineEmits(['update:page', 'update:limit', 'pagination']);
const props = defineProps({
    total: {
        required: true,
        type: Number
    },
    pageNum: {
        type: Number,
        default: 1
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    pageSize: {
        type: Number,
        default: 5
    }
});
function handleSizeChange(size) {

}


function handleCurrentChange(page) {
    UpdatePagination('pagination', {page: page, limit: props.pageSize})
}
</script>

<style scoped>
/*.pagination-container {*/
/*  background: #fff;*/
/*  padding: 32px 16px;*/
/*}*/
/*.pagination-container.hidden {*/
/*  display: none;*/
/*}*/
</style>
